<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="themes/bootstrap/easyui.css" rel="stylesheet">
<link href="themes/icon.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script>
<title>Insert title here</title>
<style type="text/css">
	#top{
		margin-bottom:5px;
		margin-top:20px;
	}
	#searchdepartment{
		width:300px;
		
	}
	#selectDepart{
		position:absolute;
		right:9px;
		
	}
	#addwin{
		height:300px;
		width:400px;
	}
	#updatewin{
		height:300px;
		width:400px;
	}
</style>
</head>
<script type="text/javascript">
	$(function(){
		$("input").attr("maxLength","8");
		$('#elployee').linkbutton('disable');//禁用按钮
		//配置部门搜索框
		$('#searchdepartment').searchbox({
			height:27,
			prompt:'请输入部门名称',
			searcher:function(value,name){
				name="elployee";
				//查询部门
				if((value!=""&&value!="请输入部门名称")||name=="allDepart"){
					var dName = value;
					var sName = name;
					if(sName=="elployee"){
						$('#departmentmsge').datagrid('showColumn', 'elName');//展示隐藏的员工名一列
						
					}else{
						$('#departmentmsge').datagrid('hideColumn', 'elName');//隐藏的员工名一列
					}
					//重载表格
			  		$('#departmentmsge').datagrid('reload',{
			  			searchName:dName,
			  			isDepart:name
			  		});
				}else{
					$.messager.alert('提示','部门不能为空或默认');  
				};
			}			
		});
		
		//配置部门展示表格
		$('#departmentmsge').datagrid({
			url:'${pageContext.request.contextPath}/showdepartment',//从远程站点请求数据。
			columns:[[{field:'check',checkbox:true,width:100},
			          {field:'dId',title:'dId',width:100,hidden:true},
			          {field:'dName',title:'部门名称',width:100},
			          {field:'elId',title:'elId',width:100,hidden:true},
			          {field:'elName',title:'员工',width:400,hidden:true},
			          ]],
			          fitColumns:true,
			          striped:true,//斑马线效果
			          rownumbers:true,//显示行号列
			          pagination:true,//是否显示分页栏
			          //显示工具栏
			          toolbar: [{
			      		iconCls: 'icon-add',//图标
			      		text:'添加',//图标的文本
			      		handler: function(){
			      		//显示部门增加窗口
			      			$('#addwin').window('open');
			      			}
			      	},'-',{
			      		iconCls: 'icon-remove',
			      		text:'删除',
			      		handler: function(){
			      			var checks = $('#departmentmsge').datagrid('getChecked');
			      			if(checks.length<1){
			      				$.messager.confirm("提示","请至少选择一行");
			      			}else{
			      				$.messager.confirm('提示','您确认删除？',function(r){    
								    if (r){
								    	var dIds = new Array();//定义一个数组存放选中部门的id
					      				for(var i=0;i<checks.length;i++){
					      					dIds[i] = checks[i].dId;
					      				}
					      				$.ajax({
					      					type:'post',
					      					url:'${pageContext.request.contextPath}/deleteDepart?dIds='+dIds,
					      					dataType:'text',
					      					success:function(data){
					      							if(data!="1"){
					      								$.messager.confirm("提示","未能成功删除");
					      							}else{
					      								$.messager.confirm("提示","删除成功",function(r){
					      									if(r){
					      										$('#departmentmsge').datagrid('reload');
					      									}
					      								});
					      							}
					      					}
					      				});
								    }
								});
			      				
			      				
			      			}
			      			}
			      	},'-',{
			      		iconCls: 'icon-edit',
			      		text:'修改',
			      		handler: function(){
			      			var checks = $('#departmentmsge').datagrid('getChecked');//获取选中的行
			      			if(checks.length!=1){//判断是否选中了多行
			      				$.messager.confirm("提示","请选择一行",function(r){
			      					if(r){
			      						$('#departmentmsge').datagrid('unselectAll');//取消选择所有当前页中所有的行（清空选择）
			      					}
			      				});
			      			}else{
			      				$('#updatewin').window('open');//打开修改窗口
			      				$('#updateDepartform').form('load',checks[0]);//将选择行的数据加载到表单中
			      			}
			      			}
			      	}]		          
		});
		//加载时增加窗口关闭
		$('#addwin').window('close');
		//配置增加部门的表单
		$("#addDepartform").form({
			url:'${pageContext.request.contextPath}/addDepart',
			success:function(data){
				if(data=="1"){
					$('#addwin').window('close');//关闭新增窗口
					$("#addwin").window({
						onClose:function(){
							$("#addDepartform").form('clear');
						}
					});
					$.messager.confirm("提示","添加成功",function(r){
						if(r){
							$('#addDepartform').form('clear');//清除表单内容
							$('#departmentmsge').datagrid('reload');//重载表单
						}
					});
				}else{
					$.messager.confirm("提示","未成功添加");
				}
			}
		});	
		//加载时隐藏修改表单
		$('#updatewin').window('close');
		//配置修改部门的表单
		$('#updateDepartform').form({
			url:'${pageContext.request.contextPath}/updateDepart',
			success:function(data){
				if(data!="1"){
					$.messager.confirm("提示","修改未成功",function(){
						
					});//提示修改未成功
				}else{
					$('#updatewin').window('close');//关闭修改窗口
					$.messager.confirm("提示","修改成功",function(){
						$('#updateDepartform').form('clear');//清除表单内容
						$('#departmentmsge').datagrid('reload');//重载表单
					});
				};
			}
		});
		//点击查询所有的部门
		$("#selectDepart").bind('click', function(){
			$('#departmentmsge').datagrid('hideColumn', 'elName');//隐藏的员工名一列
			//重载表格
	  		$('#departmentmsge').datagrid('reload',{
	  			dName:null,
	  		});
		});
		
	});
	//提交增加部门的表单
	function addForm(){
		$("#addDepartform").form('submit');
	}
	//提交修改部门的表单
	function updateForm(){
		$("#updateDepartform").form('submit');
	}
	
	


</script>
<body>
<!-- 搜索框 -->
	<div id="top">
	<span id="elployee" data-options="name:'elployee'"   class="easyui-linkbutton">部门下的员工</span>
	<input type="text" id="searchdepartment"/>
	<button id="selectDepart" class="easyui-linkbutton">所有部门</button></div>
	<!-- 部门表格 -->
	<div><table id="departmentmsge"></table> </div>
	<!-- 部门增加窗口 -->
	<div id="addwin" class="easyui-window" title="增加部门">
		<form id="addDepartform" method="post">
			<div style="margin-left:70px;margin-top:60px;">
					<span>部门名称:</span>
					<input class="easyui-textbox" name="dName" style="width:200px;" />
			</div>
			<center style="margin-top:40px;">
					<a href="javascript:void(0)" class="easyui-linkbutton" onclick="addForm()" style="width:80px">提交</a>
			</center>
		</form>
	</div>
	<!-- 部门修改表单 -->
		<div id="updatewin" class="easyui-window" title="增加部门">
		<form id="updateDepartform" method="post">
			<div style="margin-left:70px;margin-top:60px;display:none">
					<span>部门编号:</span>
					<input class="easyui-textbox" name="dId" style="width:200px;" />
			</div>
			<div style="margin-left:70px;margin-top:60px;">
					<span>部门名称:</span>
					<input class="easyui-textbox" name="dName" style="width:200px;" />
			</div>
			<center style="margin-top:40px;">
					<a href="javascript:void(0)" class="easyui-linkbutton" onclick="updateForm()" style="width:80px">提交</a>
			</center>
		</form>
	</div>
</body>
</html>